<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
import Typed from 'typed.js';
import { Icon as VIcon } from '@iconify/vue';
import GiteeContribution from './components/gitee-contribution/index.vue';

const descRef = ref();
const isLoaded = ref(false);
let typed = null;

onMounted(() => {
  document.fonts.ready.then(async () => {
    isLoaded.value = true;
    await nextTick();
    typed = new Typed(descRef.value, {
      strings: [
        '大家好，我是『金旺』，第 964 号咸鱼，一位不是很强的前端开发者。',
      ],
      typeSpeed: 30,
      loop: false,
    });
  });
});

onBeforeUnmount(() => {
  if (typed) {
    typed.destroy();
  }
});
</script>

<template>
  <div>
    <div v-if="isLoaded" class="content">
      <div class="body">
        <!-- <h1>SaltedFish964</h1> -->
        <h1>前端栈笔记</h1>
        <p>
          <span ref="descRef">
            大家好，我是 SaltedFish964，第 964
            号咸鱼，一位不是很强的前端开发者。
          </span>
        </p>
        <p class="title">常用技术栈：</p>
        <div class="lists">
          <ul>
            <li>Vue</li>
            <li>Vite</li>
            <li>Ant Design Vue 、Element Plus</li>
            <li>Electron</li>
            <li>Nestjs</li>
          </ul>
        </div>
        <p>
          <span>我的博客：</span>
          <a href="http://blog.salted-fish.top/" target="_blank">
            <span>SaltedFish964's Blog</span>
          </a>
        </p>
        <p>我可能会出现在：</p>
        <div class="find-me">
          <a href="https://gitee.com/du-dudu" target="_blank">
            <v-icon
              class="icon"
              icon="simple-icons:gitee"
              width="20"
              height="20"
            ></v-icon>
            <span>Gitee</span>
          </a>
          <div class="divider"></div>
          <a
            href="https://www.douyin.com/root/live/813731100492"
            target="_blank"
          >
            <v-icon
              class="icon"
              icon="streamline-logos:tiktok-logo-block"
              width="20"
              height="20"
            ></v-icon>
            <span>抖音</span>
          </a>
          <div class="divider"></div>
          <a href="https://space.bilibili.com/36065269" target="_blank">
            <v-icon
              class="icon"
              icon="streamline-logos:bilibili-logo-block"
              width="20"
              height="20"
            ></v-icon>
            <span>哔哩哔哩</span>
          </a>
          <div class="divider"></div>
          <a href="https://github.com/saltedfish964" target="_blank">
            <v-icon
              class="icon"
              icon="streamline-logos:github-logo-2-block"
              width="20"
              height="20"
            ></v-icon>
            <span>Github</span>
          </a>
        </div>
        <p>Gitee 战绩：</p>
        <gitee-contribution></gitee-contribution>
        <p>我的开源：</p>
        <div class="source-list">
          <div>
            <h3>
              <a href="https://gitee.com/du-dudu/niuma-admin" target="_blank"
                >Niuma Admin - 一个 Vue3 的 JavaScript 后台管理系统</a
              >
            </h3>
            <ul>
              <li>基于 Vue3 + Vite + Ant Design Vue 的后台管理系统。</li>
              <li>使用 JavaScript 实现，无 TypeScript 。</li>
              <li>纯粹的前端项目，不含后端。</li>
              <li>使用 npm 进行依赖管理，无需额外安装 yarn、pnpm 等工具。</li>
              <li>
                克隆代码即可运行，无需额外配置，让新手 Vue
                开发者和后端开发者都能快速上手。
              </li>
            </ul>
          </div>
        </div>
      </div>
      <footer class="footer">
        <p>© 2025 我的博客. All rights reserved.</p>
        <a
          href="http://beian.miit.gov.cn/"
          target="_blank"
          rel="noopener noreferrer"
        >
          备案号：粤ICP备2025493816号
        </a>
      </footer>
    </div>
    <div v-else class="loading-contant">
      <div class="loading">
        <svg width="64px" height="48px">
          <polyline
            points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24"
            id="back"
          ></polyline>
          <polyline
            points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24"
            id="front"
          ></polyline>
        </svg>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content {
  width: 688px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content .body {
  flex: 1;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 688px) {
  .content {
    width: 100%;
    padding: 40px 20px;
  }
}

.loading-contant {
  background: #212121;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading svg polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loading svg polyline#back {
  fill: none;
  stroke: #ff4d5033;
}

.loading svg polyline#front {
  fill: none;
  stroke: #ff4d4f;
  stroke-dasharray: 48, 144;
  stroke-dashoffset: 192;
  animation: loading 1.4s linear infinite;
}

@keyframes loading {
  72.5% {
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.divider {
  position: relative;
  display: inline-block;
  height: 0.9em;
  margin: 0 8px;
  vertical-align: middle;
  border-top: 0;
  border-inline-start: 1px solid #24272e;
}

.find-me {
  padding-bottom: 16px;
  display: flex;
  align-items: center;
}
.find-me a {
  display: flex;
  align-items: center;
}
.find-me .icon {
  padding-top: 3px;
  margin-right: 2px;
}

.source-list h3 {
  padding: 0 24px;
}
</style>
